<mat-card class="page-title">
    <span>网关路由</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <a (click)="refresh()" matTooltip="刷新" (disabled)="updatingRoutes">
            <mat-icon color="primary">refresh</mat-icon>
        </a>
    </div>
</mat-card>

<mat-card>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>URL</th>
                <th>路由至微服务</th>
                <th>当前可用微服务实例</th>
            </tr>
            </thead>
            <tbody>
                <tr *ngFor="let route of gatewayRoutes">
                    <td>{{route.path}}</td>
                    <td>{{route.serviceId}}</td>
                    <td>
                        <div *ngIf="route.serviceInstances.length === 0" class="label label-danger">
                            无可用服务！
                        </div>
                        <mat-chip-list>
                            <mat-chip *ngFor="let instance of route.serviceInstances" selected [color]="'info'">
                                <a href="{{instance.uri}}" target="_blank">{{instance.uri}}</a>
                            </mat-chip>
                        </mat-chip-list>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</mat-card>
